<template>
	<view class="msg-item u-flex u-flex-nowrap u-row-around u-padding-35"  hover-class="active" hover-stay-time="150"  @click.native="clickMsg">
		<view class="left-wr u-flex-1">
			<u-avatar :src="avatarSrc"></u-avatar>
		</view>
		<view class="right-wr u-flex-4">
			<view class="r-top u-flex u-flex-nowrap u-row-between">
				<view class="name u-font-40">{{userInfo.nick}}</view>
				<view class="time u-font-xs">{{item.time | timeFrom('yyyy-mm')}}</view>
			</view>
			<view class="r-bottom u-flex u-flex-nowrap u-row-between">
				<view class="content u-line-1 u-flex-5">{{item.text}}</view>
				<view class="num u-text-center" v-if="num">{{num}}</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props:{
		item:Object,
		num:Number
	},
	data(){
		return {
			_nim:null,
			userInfo:{}
		}
	},
	computed:{
		avatarSrc(){
			return this.userInfo.avatar||'/static/images/avatar.webp'
		}
	},
	created(){
		const nim=getApp().globalData._nimInstance
		this._nim=nim
		if(nim&&this.item){
			nim.getUser({
				account: this.item.target,
				done: this.getUserDone
			})
		}
	},
	methods:{
		//点击消息
		clickMsg(){
			uni.navigateTo({
			   url: `/pages/chat?account=${this.userInfo.account}&sessionId=${this.item.sessionId}&nickName=${this.userInfo.nick}`
			})
		},
		getUserDone(error, user){
			console.log('获取用户资料' + (!error?'成功':'失败'),error, user);
			if(!error){
				this.userInfo=user
			}
		}
	}
}
</script>

<style lang="scss">
@keyframes touchItem{
	0%{
		opacity: 1;
		
	}
	50%{
		opacity:0;
	}
	50%{
		opacity:1;
	}
}
.msg-item{
	width: 100%;
	box-sizing: border-box;
	border: 2rpx solid rgba(209, 213, 219,0.5);
	border-radius: 5rpx;
	&.active{
		background-color: rgba(229, 231, 235, 0.5);
	}
	.left-wr{
		
	}
	.right-wr{
		.r-top{
			.name{
				
			}
			.time{
				color: #6B7280;
			}
		}
		.r-bottom{
			color: #6B7280;
			.content{
				max-width: 400rpx;
			}
			.num{
				color: white;
				background-color: red;
				border-radius: 25rpx;
				width: 50rpx;
				height: 50rpx;
				line-height: 50rpx;
			}
		}
	}
}
</style>
